<form *ngIf="active" #dnForm="ngForm">
  <fieldset class="form-group row">
    <label for="country" class="col-form-label col-xs-12">Country Name (2-letter code)</label>
    <div class="col-md-4">
      <input [(ngModel)]="model.c" name="c" required maxlength="2" class="form-control" id="country" placeholder="Country">
    </div>
    <div class="col-md-8"><p class="form-control-static form-comment" [class.invalid]="!model.isValidCountry">{{model.countryName}}</p></div>
  </fieldset>
  <fieldset class="form-group">
    <label for="state">State or Province Name (full name)</label>
    <input [(ngModel)]="model.st" name="st" class="form-control" id="state" placeholder="State or Province">
  </fieldset>
  <fieldset class="form-group">
    <label for="locality">Locality Name (eg, city)</label>
    <input [(ngModel)]="model.l" name="l" class="form-control" id="locality" placeholder="Locality">
  </fieldset>
  <fieldset class="form-group">
    <label for="org">Organization Name (eg, company)</label>
    <input [(ngModel)]="model.o" name="o" class="form-control" id="org" placeholder="Organization">
  </fieldset>
  <fieldset class="form-group">
    <label for="orgunit">Organizational Unit Name (eg, section)</label>
    <input [(ngModel)]="model.ou" name="ou" class="form-control" id="orgunit" placeholder="Organizational Unit">
  </fieldset>
  <fieldset class="form-group">
    <label for="cn">Common Name (eg, your name or your server's hostname)</label>
    <input [(ngModel)]="model.cn" name="cn" required class="form-control" id="cn" placeholder="Common Name">
  </fieldset>
  <button (click)="clear()" class="btn btn-secondary">Clear</button>
  <button type="submit" [disabled]="!dnForm.form.valid" class="btn btn-primary">Submit</button>
</form>
